<template>
	<el-col :span="componentModel.col*6" v-show="visible">
		<el-row>
			<el-col :span="8" class="field-label-div" v-if="!componentModel.noLabel">
				<label class="field-label">{{componentModel.label}}</label>
			</el-col>
			<el-col :span="componentModel.fieldcol">
				<el-select size="mini" v-model="vue_model" placeholder="请选择" @change="onChangeHandler()" clearable  :disabled="readonly" filterable>
					<el-option v-for="item in selectItemList" :key="item.value" :label="item.name" :value="item.value">
					</el-option>
				</el-select>
			</el-col>
		</el-row>
	</el-col>
	
</template>

<script>
	import {sendComponentValueChangeRequest} from '@/utils/requestUtils.js';
	import utils from '@/utils/utils.js';
	export default {
		name: "SelectComponent",
		props: ["componentModel","scope","options"],
		data() {
			return {
				selectItemList: [],
				vue_model: "",
				visible:true,
				readonly:false,
				label: "",
			}
		},
		inject:['children'],
		mounted() {
			this.children.push(this);
			if(this.options!=undefined){
				this.selectItemList = this.options;
			}
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			setProp(prop) {
				var options = prop["options"];
				var value = prop["value"];
				if (value !==undefined) {
					if(value==null){
						value="";
					}
					this.vue_model=value;
				}
				if (options !== undefined) {
					this.selectItemList = options;
				}
				for (var k in prop) {
					if(k=="visible"){
						this.visible=prop[k];
					}else if(k=="readonly"){
						this.readonly=prop[k];
					}else if(k=="label"){
						this.label = prop[k];
					}
				}
			},
			getValue() {
				return this.vue_model;
			},
			onChangeHandler() {
				if(this.scope!=undefined){
					this.$emit("onValueChange",this);
					return;
				}
				sendComponentValueChangeRequest(this);
			}
		}
	}
</script>

<style>
</style>
